<template>
  <div class="layout-wrapper layout-witness">
    <div class="layout-header layout-search">
      <el-form :inline="true" :model="searchForm">
        <el-form-item>
          <el-input
            v-model.trim="searchForm.keyword"
            class="ui-w210"
            placeholder="项目名称"
            @keyup.native.enter="handleSearch()"
          >
            <el-button slot="append" type="primary" icon="icon-sousuo" @click="handleSearch()" />
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="layout-body">
      <el-table ref="taskTable" v-loading="tableLoading" :data="tableData" height="100%" stripe>
        <el-table-column type="index" align="left" label="序号" width="50">
          <template slot-scope="scope">
            {{ pageObj.currentPage * pageObj.pageSize + 1 + scope.$index }}
          </template>
        </el-table-column>
        <el-table-column prop="xmname" label="项目名称"/>
        <el-table-column prop="bdname" label="标段名称"/>
        <el-table-column prop="warningname" label="预警信息"/>
        <el-table-column prop="warningvalue" label="阀值" width="100"/>
        <el-table-column prop="warningnum" label="预警值" width="100"/>
        <el-table-column prop="warningtime" label="预警时间" width="160"/>
        <el-table-column label="操作" align="center" header-align="center" width="90">
          <template slot-scope="scope">
            <el-button type="text" size="default" @click="viewData(scope.row)"> 查看 </el-button>
<!--            <el-button type="text" size="default" @click="hulue(scope.row.id)"> 忽略 </el-button>-->
<!--            <el-button type="text" size="default" @click="clData(scope.row)"> 处理 </el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="layout-footer">
      <wpagination
        v-if="pageObj.total > pageObj.pageSizes[0]"
        :total="pageObj.total"
        :page.sync="pageObj.currentPage"
        :limit.sync="pageObj.pageSize"
        :pageSizes="pageObj.pageSizes"
        @pagination="projectListFn()"
      />
    </div>
    <el-dialog
      width="60%"
      :close-on-click-modal="false"
      draggable
      :show-close="false"
      title="预警信息处理"
      :visible.sync="editTempl"
    >
      <div>
        <el-form ref="templForm" :model="templForm" :rules="templRules" label-width="auto">
          <el-descriptions title="" :column="2">
            <el-descriptions-item label="项目名称" :span="2">{{templForm.xmname}}</el-descriptions-item>
            <el-descriptions-item label="标段名称" :span="2">{{templForm.bdname}}</el-descriptions-item>
            <el-descriptions-item label="预警信息" :span="2">{{templForm.warningname}}</el-descriptions-item>
            <el-descriptions-item label="阀值">{{templForm.warningvalue}}</el-descriptions-item>
            <el-descriptions-item label="预警值">{{templForm.warningnum}}</el-descriptions-item>
            <el-descriptions-item label="预警时间" :span="2">{{templForm.warningtime}}</el-descriptions-item>
          </el-descriptions>
<!--          <el-form-item label="处理记录">
            <el-input type="textarea"
                v-model="templForm.content"
                placeholder="请输入处理记录"
                :disabled="childType == 'view' ? true : false"
            />
          </el-form-item>-->
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="childType != 'view'" :loading="btnLoading" type="primary" @click="submitData('templForm')">确定</el-button>
        <el-button @click="cancel('templForm')">取消</el-button>
      </span>
    </el-dialog>
<!--    <el-dialog title="预警信息" :visible.sync="warninginfo.show" width="60%">-->
<!--      <el-descriptions title="" :column="2" border>-->
<!--        <el-descriptions-item label="见证事项" :span="2">{{warninginfo.info.warningname}}</el-descriptions-item>-->
<!--        <el-descriptions-item label="阀值">{{warninginfo.info.warningvalue}}</el-descriptions-item>-->
<!--        <el-descriptions-item label="预警值">{{warninginfo.info.warningnum}}</el-descriptions-item>-->
<!--        <el-descriptions-item label="预警时间">{{warninginfo.info.warningtime}}</el-descriptions-item>-->
<!--      </el-descriptions>-->
<!--    </el-dialog>-->
    <el-dialog title="预警信息" :visible.sync="warninginfo.show" width="60%">
      <el-descriptions title="" :column="2" border>
        <el-descriptions-item label="见证事项" :span="2">{{warninginfo.info.warningname}}</el-descriptions-item>
        <el-descriptions-item label="阀值">{{warninginfo.info.warningvalue}}</el-descriptions-item>
        <el-descriptions-item label="预警值">{{warninginfo.info.warningnum}}</el-descriptions-item>
        <el-descriptions-item label="预警时间" :span="2">{{warninginfo.info.warningtime}}</el-descriptions-item>
<!--        <el-descriptions-item label="处理记录" :span="2">{{warninginfo.info.content}}</el-descriptions-item>-->
<!--        <el-descriptions-item label="处理人">{{warninginfo.info.clusername}}</el-descriptions-item>-->
<!--        <el-descriptions-item label="处理时间">{{warninginfo.info.cltime}}</el-descriptions-item>-->
      </el-descriptions>
    </el-dialog>
  </div>
</template>
<script>
  import { list, dcllist, hulue, chuli } from "../../../../../api/weeon/warninginfo/warninginfo";
  export default {
    data() {
      // 这里存放数据
      return {
        childType: "",
        editTempl: false,
        btnLoading: false,
        tableData: [],
        tableLoading: false,
        pageObj: {
          total: 0,
          currentPage: 0,
          pageSize: 10,
          pageSizes: [10, 20, 30]
        },
        searchForm: {
          keyword: ""
        },
        warninginfo: {show: false,info: {}},
        templForm: {
          warningname:"",
          warningvalue:"",
          warningnum:"",
          warningtime:"",
          content:""
        },
        templRules: {
          content: [{ required: true, message: "请输入处理记录", trigger: "blur" }]
        }
      };
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.projectListFn();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    // 生命周期 - 销毁之前
    beforeDestroy() {},
    // 生命周期 - 销毁完成
    destroyed() {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
    methods: {
      submitData(formName) {
        let this_ = this;
        try {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.dochuli();
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        } catch (error) {
          console.error(error);
          this.$message({
            type: "warning",
            message: "保存数据失败，稍后再试"
          });
        }
      },
      //保存
      async dochuli() {
        this.btnLoading = true;
        const res = await chuli(this.templForm);
        if (res.stat === 1) {
          this.$message({
            type: "success",
            message: "保存成功",
            single: true
          });
        } else {
          this.$message({
            type: "warning",
            message: res.msg,
            single: true
          });
        }
        this.btnLoading = false;
        this.editTempl = false;
        this.childType = "";
        this.$refs.templForm.resetFields(); //清空对象
        this.projectListFn(); //刷新列表
      },
      //取消
      cancel(formName) {
        this.editTempl = false;
        this.childType = "";
        this.tableLoading = false;
        this.btnLoading = false;
        this.templForm ={};
        this.$refs[formName].resetFields();
        this.projectListFn();
        // this.roomDeviceShow = false;
      },
      clData(row) {
        this.editTempl = true;
        this.templForm = row;
        this.childType = "edit";
      },
      viewData(row){
        this.warninginfo.show = true;
        this.warninginfo.info = row;
      },
      hulue(id){
        this.$confirm("是否忽略该预警信息？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let params = {
              id: id
            };
            this.dclhulue(params);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
              single: true
            });
          });
      },
      async dclhulue(params){
        const res = await hulue(params);
        if (res.stat === 1) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.editTempl = false;
          this.childType = "";
          this.projectListFn();
        }else{
          this.$message({
            type: "error",
            message: res.msg || "分配失败，请稍后再试",
            single: true
          });
        }
      },
      // 数据列表
      async projectListFn() {
        try {
          this.tableLoading = true;
          this.tableData = [];
          let params = {
            keyword: this.searchForm.keyword,
            pageNo: this.pageObj.currentPage,
            pageSize: this.pageObj.pageSize
          };
          const res = await list(params);
          this.tableLoading = false;
          if (res.stat === 1) {
            if (res.data.page.totalElements === 0 && this.pageObj.currentPage !== 0) {
              this.pageObj.currentPage = 0;
              this.$nextTick(() => {
                this.projectListFn();
              });
              return;
            }
            this.tableData = res.data.page.content;
            this.pageObj.total = res.data.page.totalElements;
          } else {
            this.$message({
              type: "error",
              message: res.msg || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (error) {
          console.log(error);
          this.tableLoading = false;
        }
      },
      handleSearch() {
        this.pageObj.total = 0;
        this.pageObj.currentPage = 0;
        this.projectListFn();
      },
    }
  }
</script>
<style lang="scss" scoped>
  .status-list {
    padding-top: 18px;
    span {
      padding-left: 20px;
      font-size: 12px;
      &::before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 5px;
        margin-top: -2px;
      }
    }
    .completed::before {
      background-color: #56b502;
    }
    .inWitness::before {
      background-color: #1890ff;
    }
    .notStarted::before {
      background-color: #b2b2b2;
    }
  }
  ::v-deep.progress-list {
    .el-step {
      height: 26px;
      line-height: 26px;
      &::before {
        border-width: 13px;
      }
      &::after {
        border-width: 13px;
        right: -26px;
      }
      .cell {
        padding: 0 6px;
      }
      .el-step__title {
        line-height: 26px;
        text-align: center;
        i {
          color: #fc9306;
          // background-color: #fff;
        }
      }
    }
    // 已完成状态
    .status-completed {
      cursor: pointer;
      background: rgba(86, 181, 2, 0.2);
      &::after {
        border-left-color: rgba(86, 181, 2, 0.2);
      }
      .el-step__title {
        color: #56b502;
      }
    }
    .status-completed:hover {
      background: rgba(86, 181, 2);
      &::after {
        border-left-color: rgba(86, 181, 2);
      }
      .el-step__title {
        color: #fff;
      }
    }
    // 见证中状态
    .status-inWitness {
      cursor: pointer;
      background: rgba(24, 144, 255, 0.2);
      &::after {
        border-left-color: rgba(24, 144, 255, 0.2);
      }
      .el-step__title {
        color: #1890ff;
      }
    }
    .status-inWitness:hover {
      background: rgba(24, 144, 255);
      &::after {
        border-left-color: rgba(24, 144, 255);
      }
      .el-step__title {
        color: #fff;
      }
    }
    // 未开始状态
    .status-notStarted {
      background: rgba(153, 153, 153, 0.2);
      &::after {
        border-left-color: rgba(153, 153, 153, 0.2);
      }
    }
  }
</style>
